<template>
	<g-page :is-tabbar="true">
		<view class="page">
			<banner ref="banner" v-model="tabCurrent" @click="clickTabList"></banner>
			<scroll-view class="scrollPage" :scroll-y="true" :scroll-with-animation="true" :scroll-into-view="showId">
				<view id="information">
					<information></information>
				</view>
				<view id="photoWall">
					<photoWall></photoWall>
				</view>
				<view id="activityForecast">
					<activityForecast></activityForecast>
				</view>
				<view id="voideCom">
					<voideCom></voideCom>
				</view>
			</scroll-view>
		</view>
	</g-page>
</template>
<script>
	import information from "./components/information/information";
	import activityForecast from "./components/activityForecast/activityForecast"
	import banner from "./components/banner/banner"
	import photoWall from "./components/photoWall/photoWall";
	import voideCom from "./components/viodeCom/voideCom";


	import { 
		mapState, 
		mapActions, 
		mapMutations, 
		mapGetters 
	} 
	from "vuex";
	export default {
		name: "home",
		computed: {
			...mapState("USER", {
				agreementState: (state) => state.agreement,
				userInfo: (state) => state.userInfo,
				token: (state) => state.token,
			}),
			agreement: {
				get() {
					return this.agreementState;
				},
				set(newValue) {
					this.setAgreement(newValue);
				},
			},
		},
		components: {
			information,
			activityForecast,
			banner,
			voideCom,
			photoWall
		},
		data() {
			return {
				tabCurrent: 0,
				showId: "information"
			};
		},
		onLoad() {
		},
		methods: {
			clickTabList(current) {
				switch (current) {
					case 0:
						this.showId = "information";
						break;
					case 1:
						this.showId = "activityForecast";
						break;
					case 2:
						uni.navigateTo({
							url: '/pages/excellent/excellent_leader?type=1'
						})
						break;
					case 3:
						uni.navigateTo({
							url: '/pages/excellent/excellent_leader?type=2'
						})
						break;
					case 4:
						uni.navigateTo({
							url: '/pages/excellent/department'
						})
						break;
					default:
				}
			}

		}
	}
</script>

<style lang="scss" scoped>
	.page {
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	.scrollPage {
		flex: 1;
		overflow: hidden;
	}

	#photoWall {
		background-color: #f3f3f3;
	}
</style>
